<template>
    <div class="">
      <div class="vx-row ">
        <div class="vx-col w-full lg:w-1/2 mb-base" style="overflow: hidden">
          <img  style="object-fit: cover;width: 100%; height: 100%;" src="./bone.png" alt="">
        </div>
        <div class="vx-col w-full lg:w-1/2 mb-base">
          <vx-card title="">
            <vs-table ref="table" multiple v-model="selected" pagination :max-items="itemsPerPage" :data="products">
              <div slot="header" class="flex flex-wrap-reverse items-center flex-grow justify-between">

                <!-- ITEMS PER PAGE -->
                <vs-dropdown vs-trigger-click class="cursor-pointer mb-4 mr-4">
                  <div class="p-4 border border-solid d-theme-border-grey-light rounded-full d-theme-dark-bg cursor-pointer flex items-center justify-between font-medium">
                    <span class="mr-2">{{ currentPage * itemsPerPage - (itemsPerPage - 1) }} - {{ products.length - currentPage * itemsPerPage > 0 ? currentPage * itemsPerPage : products.length }} of {{ queriedItems }}</span>
                    <feather-icon icon="ChevronDownIcon" svgClasses="h-4 w-4" />
                  </div>
                  <!-- <vs-button class="btn-drop" type="line" color="primary" icon-pack="feather" icon="icon-chevron-down"></vs-button> -->
                  <vs-dropdown-menu>

                    <vs-dropdown-item @click="itemsPerPage=4">
                      <span>4</span>
                    </vs-dropdown-item>
                    <vs-dropdown-item @click="itemsPerPage=10">
                      <span>10</span>
                    </vs-dropdown-item>
                    <vs-dropdown-item @click="itemsPerPage=15">
                      <span>15</span>
                    </vs-dropdown-item>
                    <vs-dropdown-item @click="itemsPerPage=20">
                      <span>20</span>
                    </vs-dropdown-item>
                  </vs-dropdown-menu>
                </vs-dropdown>
              </div>

              <template slot="thead">
                <vs-th sort-key="name">项目</vs-th>
                <vs-th sort-key="category">位置</vs-th>
                <vs-th sort-key="popularity">使用率</vs-th>
                <vs-th sort-key="order_status">状态</vs-th>
                <vs-th sort-key="price">温度</vs-th>
                <vs-th>操作</vs-th>
              </template>

              <template slot-scope="{data}">
                <tbody>
                <vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data">

                  <vs-td>
                    <p class="product-name font-medium truncate">{{ tr.name }}</p>
                  </vs-td>

                  <vs-td>
                    <p class="product-category">{{ tr.location }}</p>
                  </vs-td>

                  <vs-td>
                    <vs-progress :percent="Number(tr.popularity)" :color="getPopularityColor(Number(tr.popularity))" class="shadow-md" />
                  </vs-td>

                  <vs-td>
                    <vs-chip :color="getOrderStatusColor(tr.order_status)" class="product-order-status">良好</vs-chip>
                  </vs-td>

                  <vs-td>
                    <p class="product-price">{{ tr.price }}</p>
                  </vs-td>

                  <vs-td class="whitespace-no-wrap">
                    <feather-icon icon="EditIcon" svgClasses="w-5 h-5 hover:text-primary stroke-current" @click.stop="editData(tr)" />
                    <!--                  <feather-icon icon="TrashIcon" svgClasses="w-5 h-5 hover:text-danger stroke-current" class="ml-2" @click.stop="deleteData(tr.id)" />-->
                  </vs-td>

                </vs-tr>
                </tbody>
              </template>
            </vs-table>

          </vx-card>
        </div>
      </div>


      <div class="vx-row">
        <!-- CARD 9: DISPATCHED ORDERS -->
        <div class="vx-col w-full">
          <vx-card title="设备总结">
            <div slot="no-body" class="mt-4">
              <vs-table :data="dispatchedOrders" class="table-dark-inverted">
                <template slot="thead">
                  <vs-th>设备</vs-th>
                  <vs-th>位置</vs-th>
                  <vs-th>维护人员</vs-th>
                  <vs-th>状态</vs-th>
                  <vs-th>最低温度</vs-th>
                  <vs-th>最高温度</vs-th>
                  <vs-th>平均温度</vs-th>
                  <vs-th>OCC.MODE</vs-th>
                  <vs-th>操作人员</vs-th>
                </template>

                <template slot-scope="{data}">
                  <vs-tr :key="indextr" v-for="(tr, indextr) in data">
                    <vs-td :data="data[indextr].orderNo">
                      <span>#{{data[indextr].orderNo}}</span>
                    </vs-td>
                    <vs-td :data="data[indextr].status">
                      <span class="flex items-center px-2 py-1 rounded"><div class="h-3 w-3 rounded-full mr-2" :class="'bg-' + data[indextr].statusColor"></div>{{data[indextr].status}}</span>
                    </vs-td>
                    <vs-td :data="data[indextr].orderNo">
                      <ul class="users-liked user-list">
                        <li v-for="(user, userIndex) in data[indextr].usersLiked" :key="userIndex">
                          <vx-tooltip :text="user.name" position="bottom">
                            <vs-avatar :src="user.img" size="30px" class="border-2 border-white border-solid -m-1"></vs-avatar>
                          </vx-tooltip>
                        </li>
                      </ul>
                    </vs-td>
                    <vs-td :data="data[indextr].orderNo">
                      <span>{{data[indextr].location}}</span>
                    </vs-td>
                    <vs-td :data="data[indextr].orderNo">
                      <span>{{data[indextr].distance}}</span>
                      <vs-progress :percent="data[indextr].distPercent" :color="data[indextr].statusColor"></vs-progress>
                    </vs-td>
                    <vs-td :data="data[indextr].orderNo">
                      <span>{{data[indextr].startDate}}</span>
                    </vs-td>
                    <vs-td :data="data[indextr].orderNo">
                      <span>{{data[indextr].estDelDate}}</span>
                    </vs-td>
                    <vs-td>
                      <span>使用中</span>
                    </vs-td>
                    <vs-td>
                      <span>{{data[indextr].operator}}</span>
                    </vs-td>
                  </vs-tr>
                </template>
              </vs-table>
            </div>

          </vx-card>
        </div>
      </div>

<!--      <data-view-sidebar :isSidebarActive="addNewDataSidebar" @closeSidebar="toggleDataSidebar" :data="sidebarData" />-->

    </div>
</template>

<script>
  import DataViewSidebar from '../ui-elements/data-list/DataViewSidebar.vue'
  import VueApexCharts from 'vue-apexcharts'
  import analyticsData from '../ui-elements/card/analyticsData.js'
    export default {
        name: "Floor",
      components:{VueApexCharts,DataViewSidebar},
      data(){
          return{
            isMounted:false,
            addNewDataSidebar: false,
            selected: [],
            itemsPerPage: 4,
            sidebarData: {},
            products:[],
            customersData:{},
            dispatchedOrders: [],
            analyticsData:{}
          }
      },
      computed: {
        currentPage() {
          if(this.isMounted) {
            console.log(this.$refs.table)
            return this.$refs.table.currentx
          }
          return 0
        },

        queriedItems() {
          return this.$refs.table ? this.$refs.table.queriedResults.length : this.products.length
        }
      },
      mounted(){
        this.isMounted = true;
      },
      created(){
        this.analyticsData = analyticsData
        this.$http.get("/api/table/dispatched-orders")
          .then((response) => { this.dispatchedOrders = response.data })
          .catch((error)   => { console.log(error) })


        this.$http.get("/api/data-list/products")
          .then((response) => {
            this.products = response.data
          })
          .catch((error) => { reject(error) })

      },
      methods:{
        mutiDel(){

        },
        getOrderStatusColor(status) {
          if(status == 'on_hold') return "warning"
          if(status == 'delivered') return "success"
          if(status == 'canceled') return "danger"
          return "primary"
        },
        getPopularityColor(num) {
          if(num > 90) return "success"
          if(num >70) return "primary"
          if(num >= 50) return "warning"
          if(num < 50) return "danger"
          return "primary"
        },
        addNewData(){
          this.sidebarData = {}
          this.toggleDataSidebar(true)
        },
        toggleDataSidebar(val=false) {
          this.addNewDataSidebar = val
        }
      }
    }
</script>

<style scoped>

</style>
